import React from 'react';
import styled from 'styled-components';
import { Popover } from 'antd';
import type { WineMenuConfig, WineItem as WineItemType } from '../types';

interface WineItemProps {
    item: WineItemType;
    config: WineMenuConfig;
    onClick?: () => void;
    onEdit?: () => void;
    onDelete?: () => void;
}

const ItemContainer = styled.div<{ config: WineMenuConfig }>`
  display: flex;
  flex-direction: column;
  position: relative;
  width: 100%;
  height: 100%;
  padding: ${props => props.config.item.padding}px;
  background-color: ${props => props.config.item.backgroundColor};
  border: ${props => `${props.config.border.width}px ${props.config.border.style} ${props.config.border.color}`};
  border-radius: ${props => props.config.item.borderRadius}px;
  box-sizing: border-box;
  overflow: hidden;
  cursor: pointer;
`;

const TopSection = styled.div<{ config: WineMenuConfig }>`
  display: flex;
  justify-content: ${props => props.config.item.image.position === 'left' ? 'space-between' : 'flex-end'};
  align-items: flex-start;
  margin-bottom: auto;
  gap: 12px;
  flex-direction: ${props => props.config.item.image.position === 'left' ? 'row' : 'row-reverse'};
`;

const Image = styled.div<{ src?: string; config: WineMenuConfig }>`
  width: ${props => props.config.item.image.width}px;
  height: ${props => props.config.item.image.height}px;
  border-radius: ${props => props.config.item.image.borderRadius}px;
  background-image: url(${props => props.src || '/placeholder.png'});
  background-size: ${props => props.config.item.image.fit};
  background-position: center;
  background-repeat: no-repeat;
  flex-shrink: 0;
  margin-bottom: ${props => props.config.item.image.marginBottom}px;
`;

const PriceWrapper = styled.div<{ config: WineMenuConfig }>`
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: ${props => props.config.fonts.price.secondPriceGap}px;
  line-height: 1.3;
`;

const Price = styled.div<{ config: WineMenuConfig }>`
  font-size: ${props => props.config.fonts.price.size}px;
  color: ${props => props.config.fonts.price.color};
  font-weight: ${props => props.config.fonts.price.weight};
  font-family: ${props => props.config.fonts.price.family};
  flex-shrink: 0;
`;

const TextContainer = styled.div<{ config: WineMenuConfig }>`
  display: flex;
  flex-direction: column;
  margin-top: auto;
  position:absolute;
  bottom:0;
  left:0;
  right:0;
  padding:${props => props.config?.item?.padding}px;
`;

const Name = styled.div<{ config: WineMenuConfig }>`
  font-size: ${props => props.config.fonts.name.size}px;
  color: ${props => props.config.fonts.name.color};
  font-weight: ${props => props.config.fonts.name.weight};
  font-family: ${props => props.config.fonts.name.family};
  text-align: left;
`;

const Category = styled.div<{ config: WineMenuConfig }>`
  font-size: ${props => props.config.fonts.category.size}px;
  color: ${props => props.config.fonts.category.color};
  font-weight: ${props => props.config.fonts.category.weight};
  font-family: ${props => props.config.fonts.category.family};
  text-align: left;
`;

const Abv = styled.div<{ config: WineMenuConfig }>`
  font-size: ${props => props.config.fonts.abv.size}px;
  color: ${props => props.config.fonts.abv.color};
  font-weight: ${props => props.config.fonts.abv.weight};
  font-family: ${props => props.config.fonts.abv.family};
  text-align: left;
`;

const ActionMenu = styled.div`
  display: flex;
  flex-direction: column;
  min-width: 100px;
`;

const ActionButton = styled.button`
  padding: 8px 12px;
  border: none;
  background: none;
  cursor: pointer;
  text-align: left;
  transition: all 0.2s;

  &:hover {
    background: #f5f5f5;
  }
`;

export const WineItem: React.FC<WineItemProps> = ({ item, config, onClick, onEdit, onDelete }) => {
    const handleClick = (e: React.MouseEvent) => {
        e.stopPropagation();
        onClick?.();
    };

    const popoverContent = (
        <ActionMenu>
            <ActionButton onClick={(e) => { e.stopPropagation(); onEdit?.(); }}>
                编辑
            </ActionButton>
            <ActionButton onClick={(e) => { e.stopPropagation(); onDelete?.(); }}>
                删除
            </ActionButton>
        </ActionMenu>
    );

    return (
        <Popover
            content={popoverContent}
            trigger="click"
            placement="bottomRight"
        >
            <ItemContainer config={config} onClick={handleClick}>
                <TopSection config={config}>
                    <Image src={item.image} config={config} />
                    <PriceWrapper config={config}>
                        <Price config={config}>{item.price}</Price>
                        {item.secondPrice && (
                            <Price config={config} style={{ borderTop: '6px solid #000' }}>{item.secondPrice}</Price>
                        )}
                    </PriceWrapper>
                </TopSection>
                <TextContainer config={config}>
                    {config.fonts.brewery.show && (
                        <div style={{
                            fontSize: config.fonts.brewery.size,
                            color: config.fonts.brewery.color,
                            fontWeight: config.fonts.brewery.weight,
                            fontFamily: config.fonts.brewery.family,
                            marginBottom: '16px',
                            textAlign: 'left'
                        }}>
                            {item.brewery}
                        </div>
                    )}
                    <Name config={config}>{item.name}</Name>
                    <Category config={config}>{item.category}</Category>
                    <Abv config={config}>ABV : {item.abv}</Abv>
                </TextContainer>
            </ItemContainer>
        </Popover>
    );
};

export default WineItem; 